<template>
  <div class="introduce_container">
    <div class="video-box">
      <video
        class="float-content__animal"
        width="auto"
        muted="muted"
        autoplay="autoplay"
        loop="loop"
        controlsList="nodownload"
        oncontextmenu="return false"
      >
        <source :src="floatContentAnimal" type="video/mp4" />
      </video>
      <div class="video-box__background"></div>
      <div class="float-content">
        <div class="float-content-title">Hotent UI</div>
        <div class="float-content-con">
          <div>
            致力于帮助产品研发和项目交付团队快速构建用户视觉
          </div>
          <div>与交互体验优秀的web端软件系统。</div>
        </div>
        <div>
          <el-button type="primary" size="large" @click="startTutorial">
            开始使用
          </el-button>
          <el-button type="default" size="large" @click="desginGuide">
            设计指南
          </el-button>
        </div>
      </div>
    </div>

    <div class="module-introduce">
      <el-row class="el-row--flex">
        <el-col :span="8">
          <div class="module-introduce-card">
            <div>
              <img :src="moduleOneStep" />
            </div>
            <div>
              <div class="module-introduce-card-title">
                one stop 一站式
              </div>
              <div class="module-introduce-card-con">
                在Hotent-UI提供的标准框架基础上，配合EIP平台的可视化表单设计器、应用快速开发等功能，实现从研发到交付的一站式服务。
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="module-introduce-card">
            <div>
              <img :src="moduleEasyToUse" />
            </div>
            <div>
              <div class="module-introduce-card-title">
                easy to use 易用性
              </div>
              <div class="module-introduce-card-con">
                涵盖了从布局、容器、基础组件和高级组件，每种组件提供丰富的应用案例，学习成本低，使用难度小。
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="module-introduce-card">
            <div>
              <img :src="moduleFlexibility" />
            </div>
            <div>
              <div class="module-introduce-card-title">
                flexibility 灵活性
              </div>
              <div class="module-introduce-card-con">
                组件库基于VUE+Element
                UI构建，具备主题定制能力，在提供标准框架同时支持业务基于服务定制，应用灵活。
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="module-show-title">设计与开发资源</div>

    <div class="module-show">
      <div class="module-show-card module-show-card_design">
        <div class="module-show-card_title">设计资源</div>
        <div class="module-show-card_con">
          Hotent-UI提供 figma 组件库、Axure 元件库助力产品设计
        </div>
        <div class="module-show-card_desc">
          <img :src="showDesignFigma" />
          <div class="module-show-card_desc_name">
            Figma 组件
          </div>
          <img :src="showDesignAxure" />
          <div class="module-show-card_desc_name">
            Axure 组件
          </div>
        </div>
        <div class="module-show-card_img">
          <img :src="showDesignBac" />
        </div>
      </div>
      <div class="module-show-card module-show-card_develop">
        <div class="module-show-card_title">开发资源</div>
        <div class="module-show-card_con">
          快速构建用户视觉与交互体验优秀的web端软件系统
        </div>
        <div class="module-show-card_desc">
          <img :src="showDevelopGit" />
          <div class="module-show-card_desc_name">
            代码仓库
          </div>
          <img :src="showDevelopRigger" />
          <div class="module-show-card_desc_name">
            Basic脚手架
          </div>
        </div>
        <div class="module-show-card_img">
          <img :src="showDevelopBac" />
        </div>
      </div>
    </div>

    <footer class="footer" style="padding: 40px 18vw;">
      <div class="container">
        <div class="footer-main">
          <ht-icon class="footer-main__logo" name="hotent" scale="2" />
          <span>
            Hotent UI
          </span>
          <div class="footer-main-desc">
            <div>一套为开发者、设计师和产品经</div>
            <div>理准备的基于 Vue 2.0 的桌面端</div>
            <div>组件库</div>
          </div>
        </div>
        <div class="footer-main">
          <h4>开发</h4>
          <span class="footer-main-link">HotentUI 脚手架</span>
        </div>
        <div class="footer-main">
          <h4>生态</h4>
          <span class="footer-main-link">Hotent UI</span>
        </div>
        <div class="footer-main">
          <h4>文档</h4>
          <span class="footer-main-link">设计指南</span>
          <span class="footer-main-link">基础平台开发者中心</span>
        </div>
        <div class="footer-main">
          <h4>资源下载</h4>
          <span class="footer-main-link">Figma 组件库</span>
          <span class="footer-main-link">Axure 组件库</span>
          <span class="footer-main-link">组件交互文档</span>
        </div>
      </div>
      <div class="footer-social">
        <p class="footer-social-title">HotentUI {{ version }} Fullerene</p>
        <p>Copyrights © 2022 广州宏天软件股份有限公司 All Rights Reserved.</p>
      </div>
    </footer>
  </div>
</template>

<script>
  const packageJson = require('../../package.json')

  export default {
    name: 'Introduce',
    data() {
      return {
        version: packageJson.version,
        floatContentAnimal: require('$exp/assets/media/108347-designer.mp4'),
        moduleOneStep: require('$exp/assets/images/tab_a.86385128.svg'),
        moduleEasyToUse: require('$exp/assets/images/tab_b.ca00132d.svg'),
        moduleFlexibility: require('$exp/assets/images/tab_c.ce784f93.svg'),
        showDesignFigma: require('$exp/assets/images/icon_a.bd4b2f0a.svg'),
        showDesignAxure: require('$exp/assets/images/icon_b.f2836d26.svg'),
        showDesignBac: require('$exp/assets/images/group_circle.5ecf6772.png'),
        showDevelopGit: require('$exp/assets/images/icon_c.16c070a5.svg'),
        showDevelopRigger: require('$exp/assets/images/icon_d.a48109bd.svg'),
        showDevelopBac: require('$exp/assets/images/group_triangle.b7ac5402.png'),
      }
    },
    methods: {
      desginGuide() {
        this.$router.push({ path: '/component' })
      },
      startTutorial() {
        this.$router.push({ path: '/component' })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .introduce_container {
    width: 100%;
    min-width: 1280px;
    position: relative;

    .video-box {
      height: 65vh;
    }

    .video-box__background {
      height: 100%;
      width: 50%;
      background-image: linear-gradient(-90deg, #ffffff, #e6f0fe);
    }

    .float-content__animal {
      position: absolute;
      height: 600px;
      top: 13vh;
      right: 10vw;
    }

    .float-content {
      position: absolute;
      top: 18vh;
      left: 18vw;
      text-align: left;

      .float-content-title {
        font-size: 70px;
        line-height: 70px;
        font-weight: 500;
        color: #409eff;
        text-shadow: 0 4px 8px rgb(22 107 255 / 60%);
      }
      .float-content-con {
        font-size: 26px;
        font-weight: 400;
        line-height: 40px;
        color: #000;
        margin-top: 3.1vh;
        height: 108px;
        margin-bottom: 3.8vh;
      }

      ::v-deep {
        .el-button {
          width: 112px;
          height: 44px;
          margin-right: 10px !important;
          font-size: 14px;
        }
      }
    }

    .module-introduce {
      position: absolute;
      z-index: 100;
      width: 62vw;
      min-width: 800px;
      height: 140px;
      background: #fff;
      box-shadow: 0 2px 3px 1px rgb(0 0 0 / 1%), 0 8px 7px 1px rgb(0 0 0 / 1%),
        0 20px 13px 1px rgb(0 0 0 / 1%), 0 39px 25px 1px rgb(0 0 0 / 2%),
        0 65px 47px 1px rgb(0 0 0 / 2%), 0 100px 80px 1px rgb(0 0 0 / 3%);
      border-radius: 10px 10px 10px 10px;
      margin-top: -70px;
      left: 18vw;

      .el-row__flex {
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
      }

      .module-introduce-card {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        padding: 24px;

        img {
          height: 33px;
          margin-right: 10px;
        }

        .module-introduce-card-title {
          font-size: 18px;
          line-height: 26px;
          font-weight: 400;
          color: #000;
          margin-top: -8px;
          margin-bottom: 6px;
        }
        .module-introduce-card-con {
          font-size: 14px;
          font-weight: 400;
          color: #828b9b;
          line-height: 18px;
        }
      }
    }

    .module-show-title {
      width: 650px;
      height: 45px;
      font-size: 32px;
      font-weight: 400;
      color: #000;
      line-height: 38px;
      margin-top: 119px;
      margin-bottom: 32px;
      margin-left: 18vw;
    }

    .module-show {
      width: 62vw;
      margin-left: 18vw;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 9.2vh;

      .module-show-card {
        width: 30vw;
        height: 15vh;
        box-shadow: 0 4px 23px 1px rgb(22 107 255 / 33%);
        border-radius: 10px 10px 10px 10px;
        opacity: 1;
        border: 1px solid rgba(0, 0, 0, 0.05);
        padding: 40px;
        position: relative;
        overflow: hidden;

        &.module-show-card_design {
          background: #166bff;
        }

        &.module-show-card_develop {
          background: #00b42a;
          margin-left: 2vw;
        }

        .module-show-card_title {
          font-size: 24px;
          color: #fff;
          line-height: 24px;
          margin-bottom: 8px;
          font-weight: 200;
        }
        .module-show-card_con {
          font-size: 14px;
          color: #fff;
          line-height: 22px;
          font-weight: 200;
        }
        .module-show-card_desc {
          display: flex;
          flex-direction: row;
          align-items: center;

          @media screen and (min-width: 1920px) {
            & {
              margin-top: 3vh;
            }
          }
          @media screen and (min-width: 1366px) {
            & {
              margin-top: 5vh;
            }
          }

          img {
            width: 48px;
            height: 48px;
            margin-right: 18px;
          }
        }
        .module-show-card_img {
          position: absolute;
          @media screen and (min-width: 1920px) {
            & {
              margin-top: -10vh;
              margin-left: 17vw;
              img {
                width: 197px;
                height: 197px;
              }
            }
          }
          @media screen and (min-width: 1366px) {
            & {
              margin-top: -13vh;
              margin-left: 17vw;
              img {
                width: 160px;
                height: 160px;
              }
            }
          }
        }
        .module-show-card_desc_name {
          font-size: 14px;
          color: #fff;
          margin-right: 27px;
        }
      }
    }

    .footer {
      background-color: #f7fbfd;
      width: 62vw;
      height: 300px;

      .container {
        width: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .footer-main {
          font-size: 0;
          display: inline-block;
          vertical-align: top;

          .footer-main__logo {
            color: #166bff;
          }

          .footer-main__logo + span {
            font-weight: bold;
            font-size: 30px;
            color: #333;
            margin-left: 10px;
          }

          h4 {
            font-size: 18px;
            color: #181433;
            font-weight: 500;
            line-height: 1;
            margin: 6px 0 13px 0;
          }
        }
        .footer-main-desc {
          margin-top: 14px;
          font-size: 16px;
          font-weight: 400;
          color: #4e5769;
          line-height: 24px;
        }
        .footer-main-link {
          display: block;
          margin: 0;
          line-height: 2;
          font-size: 14px;
          color: #666;
          cursor: pointer;
        }
      }
      .footer-social {
        text-align: center;
        margin-top: 9vh;

        .footer-social-title {
          color: #666;
          font-size: 18px;
          line-height: 1;
          margin: 0 0 20px 0;
          padding: 0;
          font-weight: 700;
        }
      }
    }
  }
</style>
